<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2025-02-20 17:50:08
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-21 09:57:23
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\recipePlan\recipeTemplate\components\lossCost.vue
-->
<template>
  <div>
    <el-form ref="ruleFormRef" label-width="auto">
      <div v-for="(item, index) in costList" :key="item.paramSettingId">
        <el-form-item :label="`${item.paramDesc}：`">
         <el-input-number v-model="item.paramValue" controls-position="right" 
          :max="item.paramCode == 'weightBowlDishesLossCostRate' || item.paramCode == 'smallBowlDishesLossCostRate' ? 100 : 99999" :min="0"
          :step="item.paramCode == 'weightBowlDishesSeasoningCost' || item.paramCode == 'smallBowlDishesSeasoningCost' ? 0.1 : 1"
          :precision="2"
            />
          <span v-if="item.paramCode == 'weightBowlDishesLossCostRate' || item.paramCode == 'smallBowlDishesLossCostRate'" class="ml-1">%</span>
          <span v-else class="ml-1">元</span>
        </el-form-item>
      </div>
    </el-form>
    <div class="mt-6  btn-css">
      <pb-button size="small" @click="onSave">保存</pb-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import { getParamSetting, setAllPrams } from '@/api/Recipe'
import { createMessage } from '@/Public-UIlibrary/pb-message/method';
import { useRouter } from "vue-router"
import qs from "qs";
const router = useRouter();
const costList = ref([])

const costForm = ref([])

const onSave = () => {
  let params = costList.value.map(el => {
    return {
      paramSettingId: el.paramSettingId,
      paramValue: el.paramValue
    }
  })
  setAllPrams({paramSettingEditReqs:params}).then(res => {
    if (res.code == 2000) {
      createMessage({
        type: 'success',
        message: '保存成功'
      })
      getParamsList()
    }
  })
}


const getParamsList = () => {
  getParamSetting().then(res => {
    if (res.code = 2000) {
      costList.value = res.data
      costForm.value = res.data.filter(el => {
        return {
          paramSettingId: el.paramSettingId,
          paramValue: el.paramValue,
          paramCode: el.paramCode,
        }
      })
    }
  })
}

onMounted(() => {
  getParamsList()
})
</script>

<style lang="scss" scoped>
.weighted {
  display: flex;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}
</style>